<meta charset="UTF-8">
<style type="text/css">
    body,html{width:100%;height:100%;background:#000;padding:0;margin:0;overflow-x:hidden;overflow-y:hidden}
    *{margin:0;border:0;padding:0;text-decoration:none}
    #stats{position:fixed;top:5px;left:10px;font-size:12px;color:#fdfdfd;z-index:2147483647;text-shadow:1px 1px 1px #000, 1px 1px 1px #000}
    #dplayer{position:inherit}
</style>
<div id="dplayer"></div>
<div id="stats"></div>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/cbplayer2@latest"></script>
<script>
    var cb = new CBPlayer({
        container: document.getElementById('dplayer'),
        autoplay: true,
        // live: true,
        video: {
            url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
        },
        pluginOptions: {
            hls: {
                debug: false,
                p2pConfig: {
                    logLevel: 'none',
                    // live: true,
                    // Other p2pConfig options provided by CDNBye
                }
            }
        },
    });

    // Call switchVideo when switching to new url
    cb.switchVideo({
        url: "https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths-hls/hls.m3u8"
    });
    cb.play()

</script>
